@import "../vars";

.xdh-layout {
  min-height: 100%;
  &__north {
    &.xdh-resizable--resizing {
      transition: none;
    }
    padding: 0;
    flex-shrink: 0;
    transition: height 0.3s;
    &.xdh-layout--split {
      margin-bottom: 12px;
      position: relative;
    }
  }
  &__south {
    padding: 0;
    flex-shrink: 0;
    transition: height 0.3s;
    &.xdh-resizable--resizing {
      transition: none;
    }
    &.xdh-layout--split {
      margin-top: 12px;
      position: relative;
    }
  }

  &__west {
    overflow: visible;
    flex-shrink: 0;
    transition: width 0.3s;
    &.xdh-resizable--resizing {
      transition: none;
    }
    &.xdh-layout--split {
      margin-right: 12px;
      position: relative;
    }
  }
  &__east {
    overflow: visible;
    flex-shrink: 0;
    transition: width 0.3s;
    &.xdh-resizable--resizing {
      transition: none;
    }
    &.xdh-layout--split {
      margin-left: 12px;
      position: relative;
    }
  }

  &__main {
    padding: 0;
    height: 100%;
  }

  &__wrapper {
    height: 100%;
  }

  &--fixed {
    height: 100%;
  }
  &-split__north {
    position: absolute;
    width: 100%;
    height: 12px;
    left: 0;
    bottom: -12px;
    text-align: center;
    font-size: 12px;
  }
  &-split__west {
    width: 12px;
    height: 100%;
    position: absolute;
    right: -12px;
    top: 0;
  }
  &-split__south {
    width: 100%;
    height: 12px;
    position: absolute;
    top: -12px;
    left: 0;
  }
  &-split__east {
    width: 12px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -12px;
  }
}
